<template>
    <div class="addForm">
        <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
           >
            <div>
                <el-form  ref='birdFrom' :model="birdFrom" :rules="rules"  label-width="100px" class="bird-ruleForm">
                    <el-form-item label="鸟类别" prop="birdName">
                        <searchSelect v-model='birdFrom.birdName' @change='change'/>
                    </el-form-item>
                    <el-form-item label="鸟信息" prop="birdSentence">
                      <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容"
                          v-model="birdFrom.birdSentence">
                    </el-input>
                      <!-- <quill-editor ref="text" v-model="birdFrom.birdSentence" class="myQuillEditor" :options="editorOption" /> -->
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure" style="background-color: #009688">确 定</el-button>
            </span>
            </el-dialog>
    </div>
  </template>
  
  <script>
  import { quillEditor } from 'vue-quill-editor'
  import searchSelect from './searchSelect'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import axios from 'axios'
  export default {
  name: 'addForm',
  data () {
    return {
        dialogVisible: false,
        flag:'create',
        birdFrom:{
            birdId:'',
            id:'',
            birdName:'',
            birdSentence:''
        },
        rules: {
            birdSentence: [
                { required: true, message: '请输入内容', trigger: 'blur' },
            ],
            birdName: [
                { required: true, message: '请输入鸟类别，可搜索', trigger: 'change' }
            ]
        },
        editorOption:{}
    }
  },
  components: {
    quillEditor,
    searchSelect
  },
  created () {
  
  },
  mounted () {
  
  },
  watch: {
  },
  methods: {
      open() {  
        this.dialogVisible = true
        this.flag = 'create'
        this.birdFrom.birdId = ''
        this.birdFrom.birdName = ''
        this.birdFrom.birdSentence =''
      },
      edit(row) {
        this.dialogVisible = true
        this.flag = 'edit'
        this.id = row.id
        this.birdFrom.birdId = row.birdId
        this.birdFrom.birdName = row.birdName
        this.birdFrom.birdSentence =row.birdSentence
      },
      sure () { 
        const _t = this
        _t.$refs.birdFrom.validate((valid) => {
          if (valid) {
            if(_t.flag == 'create'){
                axios.post('/bird-system/sentence/birdSentences/add', _t.birdFrom).then(res=>{
                    _t.dialogVisible = false
                    this.$emit('success')
                })
            }else {
                _t.birdFrom.id = _t.id
                axios.put('/bird-system/sentence/birdSentences/edit', _t.birdFrom).then(res=>{
                    _t.dialogVisible = false
                    this.$emit('success')
                })
            }
            
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      change(v,data) {
          this.birdFrom.birdId = v
          this.birdFrom.birdName = data[0].name
      }
    }
  }
  </script>
  <style >
    .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #009688
    }
      .myQuillEditor {
          min-height: 150px;
      }
  </style>
  